@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1A1E23;
}

.blink-text-menu {
  display: flex;
  flex-direction: column;
  list-style-type: none;

  li {
    a {
      position: relative;
      display: flex;
      padding: 6px;
      color: white;
      font-family: Lato, sans-serif;
      text-decoration: none;

      span {
        position: relative;
        overflow: hidden;
        transition: 0.6s;

        .out {
          display: inline-flex;
        }

        .in {
          position: absolute;
          left: 0;
          opacity: 0;
          transform: translateX(100%);
        }
      }

      &:hover {
        span {
          .out {
            opacity: 0;
            transform: translateX(-100%);
          }

          .in {
            opacity: 1;
            transform: translateX(0);
          }
        }
      }
    }
  }
}
